<template>
  <div id="app" :class="[currentTheme, currentLanguage]">
    <header>
      <h1>{{ $t('systemTitle') }}</h1>
      <div class="controls">
        <ThemeSwitcher :t="$t" @theme-changed="changeTheme" />
        <LanguageSwitcher @language-changed="changeLanguage" />
        <button class="logout-button" @click="handleLogout">
          {{ $t('logout') }}
        </button>
      </div>
    </header>
    <main>
      <p>{{ $t('welcomeMessage') }}</p>
      <div class="content">
        <h2>{{ $t('dashboard') }}</h2>
        <p>{{ $t('dashboardContent') }}</p>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ThemeSwitcher from '../components/ThemeSwitcher.vue'
import LanguageSwitcher from '../components/LanguageSwitcher.vue'
import { setLanguage, currentLanguage } from '../locales/i18n'

// 响应式状态
const currentTheme = ref('light-theme')
const router = useRouter()

// 方法定义
const changeTheme = (theme: string) => {
  currentTheme.value = theme
  // 保存主题选择到本地存储
  localStorage.setItem('selectedTheme', theme)
}

const changeLanguage = (language: string) => {
  currentLanguage.value = language
  setLanguage(language)
}

const handleLogout = () => {
  // 清除登录状态
  localStorage.removeItem('isLoggedIn')
  // 跳转到登录页
  router.push('/login')
}

// 生命周期钩子
onMounted(() => {
  // 从本地存储恢复主题选择
  const savedTheme = localStorage.getItem('selectedTheme')
  if (savedTheme) {
    currentTheme.value = savedTheme
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--text-color);
  background-color: var(--bg-color);
  min-height: 100vh;
}

header {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--header-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls {
  display: flex;
  align-items: center;
}

.logout-button {
  padding: 8px 16px;
  margin-left: 20px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
  color: var(--text-color);
  background-color: var(--button-bg);
  border-color: var(--border-color);
}

.logout-button:hover {
  background-color: var(--button-hover-bg);
}

main {
  padding: 20px;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.content h2 {
  color: var(--text-color);
  margin-top: 30px;
}

.content p {
  color: var(--text-color);
  line-height: 1.6;
}

/* 英文样式 */
.en {
  font-family: Arial, sans-serif;
}
</style>